import React, { useState } from 'react'
import { View, Button, ScrollView, Image } from '@tarojs/components'
import './index.less'

const prefix = 'download'

const Index = () => {
  const [downloadStatus, setDownloadStatus] = useState<string>('')
  const [isDownloading, setIsDownloading] = useState<boolean>(false)

  const handleDownload = () => {
    setIsDownloading(true)
    setDownloadStatus('正在下载应用...')

    try {
      const link = document.createElement('a')
      link.href = 'https://dbyxs.top/download/app-release.apk'
      link.download = '小楠优选.apk'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)

      setDownloadStatus('下载已开始，请在通知栏查看进度')
      setTimeout(() => {
        setDownloadStatus('')
        setIsDownloading(false)
      }, 3000)
    } catch (error) {
      setDownloadStatus('下载失败，请稍后重试')
      setIsDownloading(false)
      console.error('Download error:', error)
    }
  }

  const jumpToApp = () => {
    try {
      window.location.href = 'dbzyn1://open?page=Home&source=h5'
    } catch (error) {
      setDownloadStatus('无法打开应用，请先下载安装')
      setTimeout(() => setDownloadStatus(''), 3000)
    }
  }

  return (
    <ScrollView className={prefix}>
      <View className={`${prefix}-container`}>
        <View className={`${prefix}-header`}>
          <View className={`${prefix}-logo`}>
            <Image
              className={`${prefix}-logo-image`}
              src='https://dbyxs.top/uploads/landscape/1745510454089fdmjpt.jpeg'
            />
          </View>
          <View className={`${prefix}-title`}>小楠优选</View>
          <View className={`${prefix}-version`}>v1.0.0</View>
        </View>

        <View className={`${prefix}-desc`}>
          应用简介：小楠优选，品质商品销售平台，为您严选各类好物，提供便捷的上架、下单服务，让购物更轻松愉快
        </View>

        <View className={`${prefix}-features`}>
          <View className={`${prefix}-features-title`}>应用亮点</View>
          <View className={`${prefix}-feature-item`}>• 精选优质商品</View>
          <View className={`${prefix}-feature-item`}>• 便捷下单流程</View>
          <View className={`${prefix}-feature-item`}>• 快速配送服务</View>
          <View className={`${prefix}-feature-item`}>• 安全支付保障</View>
        </View>

        <View className={`${prefix}-actions`}>
          <Button
            className={`${prefix}-action-button ${prefix}-primary`}
            onClick={jumpToApp}
          >
            打开应用
          </Button>

          <Button
            className={`${prefix}-action-button ${prefix}-secondary`}
            onClick={handleDownload}
            disabled={isDownloading}
          >
            下载应用
            {/* {isDownloading ? '下载中...' : '下载应用'} */}
          </Button>
        </View>

        {downloadStatus && (
          <View className={`${prefix}-status ${isDownloading ? '' : downloadStatus.includes('失败') ? `${prefix}-error` : `${prefix}-success`}`}>
            {downloadStatus}
          </View>
        )}

        <View className={`${prefix}-screenshots`}>
          <View className={`${prefix}-screenshots-title`}>截图展示</View>
          <ScrollView
            className={`${prefix}-screenshots-container`}
            scrollX
          >
            <View className={`${prefix}-screenshots-wrapper`}>
              <Image
                className={`${prefix}-screenshot`}
                src='https://dbyxs.top/uploads/landscape/1745510454089fdmjpt.jpeg'
              />
              <Image
                className={`${prefix}-screenshot`}
                src='https://dbyxs.top/uploads/landscape/174551045419989x4o2.jpeg'
              />
              <Image
                className={`${prefix}-screenshot`}
                src='https://dbyxs.top/uploads/landscape/17455104543654z8v6w.jpeg'
              />
            </View>
          </ScrollView>
        </View>

        <View className={`${prefix}-instructions`}>
          <View className={`${prefix}-instructions-title`}>使用说明</View>
          <View className={`${prefix}-instruction-item`}>1. 点击"下载应用"按钮下载APK文件</View>
          <View className={`${prefix}-instruction-item`}>2. 在手机设置中允许安装未知来源应用</View>
          <View className={`${prefix}-instruction-item`}>3. 安装完成后即可使用</View>
          <View className={`${prefix}-instruction-item`}>4. 已安装用户可直接点击"打开应用"</View>
        </View>
      </View>
    </ScrollView>
  )
}

export default Index
